<template>
	<view>
		<view  style="margin-top: 20px;border: 1px solid #007AFF;">
		 	<view style="height: 50px;font-size: 20px;line-height: 50px;border-bottom: 1px solid #007AFF;padding-left: 10px;">货主：{{uinfo.danw}}</view>
		 	<view style=" height: 60px;font-size: 20px;border-bottom:  1px solid #007AFF;padding-left: 10px;">
		 		<view style=" font-size: 20px;height: 60px;line-height: 60px;float: left;border-right: 1px solid #007AFF;">委托单号：</view>
		 		<view style=" font-size: 20px;height: 60px;line-height: 60px;float: left;padding-left: 20px;">
		 			<view style="width: 160px;float:left; height: 60px;font-size: 20px;">
						<input style="border-bottom: 1px solid #007AFF;font-size: 20px;line-height: 60px;height: 50px;" type="text" v-model="orderon"/>
					</view>
		 			<view style="width: 50px;float:left; height: 30px;font-size: 20px;margin-left: 10px;">查询</view>
		 		</view>
		 	</view>
			<view style="border-bottom:1px solid #007AFF;line-height: 40px;height: 40px;font-size: 20px;padding-left: 10px;">常用车队</view>
		 	<view style="padding-left: 10px;border-bottom: 1px solid #007AFF;">
				<view class="nav" v-for="(item,index) in sqcdlist" >
					<view style="width: 230px;float: left;font-size: 20px;">车队名称:{{item.cdname}}</view>
					<view style="margin-left: 10px;float: left;font-size: 20px;" @click="delsqlh(item)">删除</view>
				</view>
				<!-- <view class="uni-list">
					<checkbox-group @change="checkboxChange">
						<label class="uni-list-cell uni-list-cell-pd" v-for="item in sqcdlist" :key="item.value">
							<view>
								<checkbox :value="item.id" :checked="item.checked" />
							</view>
							<view>{{item.cdname}}</view>
						</label>
					</checkbox-group>
				</view> -->
		 	</view>
			<view style=" height: 60px;font-size: 20px;border-bottom:  1px solid #007AFF;padding-left: 10px;">
				<view style=" font-size: 20px;height: 60px;line-height: 60px;float: left;border-right: 1px solid #007AFF;">授权开始日期：</view>
				<view style=" font-size: 20px;height: 60px;line-height: 60px;float: left;padding-left: 20px;">
						<view style="float: left;">{{date2}}</view>
						<button style="float: left;width: 120px;height: 30px;font-size: 15px;margin-top: 10px;margin-left: 10px;" type="primary" @click="onShowDatePicker('date')">选择日期</button>	
				</view>
			</view>
			<view style=" height: 60px;font-size: 20px;border-bottom:  1px solid #007AFF;padding-left: 10px;">
				<view style=" font-size: 20px;height: 60px;line-height: 60px;float: left;border-right: 1px solid #007AFF;">授权结束日期：</view>
				<view style=" font-size: 20px;height: 60px;line-height: 60px;float: left;padding-left: 20px;">
						<view style="float: left;">{{date1}}</view>
						<button style="float: left;width: 120px;height: 30px;font-size: 15px;margin-top: 10px;margin-left: 10px;" type="primary" @click="onShowDatePicker1('date')">选择日期</button>	
				</view>
			</view>
			<view style=" height: 60px;font-size: 20px;border-bottom:  1px solid #007AFF;padding-left: 10px;">
				<view style="width: 49%; font-size: 20px;height: 60px;line-height: 60px;float: left;border-right: 1px solid #007AFF;text-align: center;">明细查询</view>
				<view style="width: 49%; font-size: 20px;height: 60px;line-height: 60px;float: left;border-right: 1px solid #007AFF;text-align: center;">统计查询</view>
			</view>
			<mx-date-picker :show="showPicker" :type="type" :value="value" :show-tips="true" :begin-text="'入住'" :end-text="'离店'" :show-seconds="true" @confirm="onSelected" @cancel="onSelected" />
			<mx-date-picker :show="showPicker1" :type="type" :value="value1" :show-tips="true" :begin-text="'入住'" :end-text="'离店'" :show-seconds="true" @confirm="onSelected1" @cancel="onSelected1" />
		 </view>
		<tabBar :pagePath="'/pages/sjcx/sjcx'"></tabBar>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				uinfo:'',
				sqcdlist:[],
				items:[],
				orderon:'',
				date: new Date().toISOString().slice(0, 10),
				date1: new Date().toISOString().slice(0, 10),
				date2: new Date().toISOString().slice(0, 10),
				value: '',
				value1: '',
				showPicker: false,
				showPicker1: false,
				type: 'rangetime',
			}
		},
		async onLoad(){
					this.getuserinfo();
					this.gethzbdsqcdlist();
			
		},
		methods: {
			async getuserinfo(){
				let data = {
					id:uni.getStorageSync('uid')
				}
				let res =  await this.$api.getuserinfo(data)
				console.log(res.data.code)
				if(res.data.code==0){
					uni.setStorageSync('uid', res.data.data.id);
					uni.setStorageSync('cdtype', res.data.data.cdtype);
					this.uinfo = res.data.data
					
				}
			},
			async gethzbdsqcdlist(){
				let data = {
					uid:uni.getStorageSync('uid')
				}
				let res = await this.$api.gethzbdsqcdlist(data)
				console.log(res.data);
				this.sqcdlist = res.data.data
			},
			onShowDatePicker(type){
					this.type = type;
					this.showPicker = true;
					this.value = this[type];
			},
			onShowDatePicker1(type){
					this.type = type;
					this.showPicker1 = true;
					this.value1 = this[type];
					console.log(this[type])
			},
			onSelected(e) {
				this.showPicker = false;
				if(e) {
					this.date2 =  e.value; 
					this[this.type] = e.value; 
				}
			},
			onSelected1(e) {
				this.showPicker1 = false;
				console.log(e)
				if(e) {
					this.date1 = e.value;
					this[this.type] = e.value; 
				}
			},
		}
	}
</script>

<style>
	.nav{
		 height: 30px;
		 line-height: 30px;
	}
	.navs{
		  height: 60px;
		  line-height: 60px;
		  text-align: center;
		  font-size: 20px;
		  border-right: 1px solid #007AFF;
		  float: left;
		  width: 80px;
	}
	.uni-list-cell {
		justify-content: flex-start
	}
</style>
